<!-- components/ResponsiveGridLayout.vue -->
<template>
  <div ref="containerRef" class="responsive-grid-container">
    <div class="responsive-grid" :style="gridStyle">
      <slot
        :items-per-row="itemsPerRow"
       
        :page-size="pageSize"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { responsiveGrid, type ResponsiveLayoutConfig,} from "../utils/gridLayout";

interface Props {

  rows?: number;
  itemMinWidth?: number;
  gap?: number;
}

const props = withDefaults(defineProps<Props>(), {
  rows: 3,
  itemMinWidth: 200,
  gap: 16,
});

const containerRef = ref<HTMLElement | null>(null);



// 使用响应式布局逻辑
const { containerWidth, itemsPerRow, calculatePageSize } =
  responsiveGrid(containerRef, itemMinWidth ,gap);

// 计算页面大小
const pageSize = computed(() => calculatePageSize(props.rows));

// 网格布局样式
const gridStyle = computed(() => ({
  gridTemplateColumns: `repeat(auto-fill, minmax(${props.itemMinWidth}px, 1fr))`,
  gap: `${props.gap}px`,
}));

// 暴露给父组件的属性和方法
defineExpose({
  itemsPerRow,

  pageSize,
  containerWidth,
});
</script>

<style scoped>
.responsive-grid-container {
  width: 100%;
  height: 100%;
}

.responsive-grid {
  width: 100%;
  display: grid;
}
</style>
